/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

var UploadManager = {

    init: function () {
        this.initDragDrop();
        if (xmlUtils.getURLParameter("edit") == "true") {
            this.getEditLook();
        }
    },

    getEditLook: function () {
        var success = function (resp) {
            var imgURL = new XMLSerializer().serializeToString(resp);
            $id('upload-image-preview').innerHTML = imgURL;
            imgURL = imgURL.substring(imgURL.indexOf('src="') + 5, imgURL.indexOf('"/>'));
            $id('image-upload-label').value = imgURL;
            $id("image-upload-text").value = imgURL.substring(imgURL.lastIndexOf('/') + 1);
            $class("button")[0].value = "Edit";
            $id("edit-look").value = xmlUtils.getURLParameter("look");
        };

        var failure = function () {
        };

        ajax.post({
            url: "ProcessServlet",
            param: {action: "getlookimage", lookId: xmlUtils.getURLParameter("look")},
            success: success,
            failure: failure
        });
    },

    uploadListener: function (node) {
        var listener = function (event) {
            var file = event.target.files[0];
            event.target.value = "";
            var success = function (resp) {
                node.getElementsByClassName("image-wrapper")[0].innerHTML = new XMLSerializer().serializeToString(resp);
            };

            var failure = function () {
            };

            ajax.post({
                url: "ProcessServlet",
                file: file,
                success: success,
                failure: failure
            });
        };

        var cNode = node.getElementsByTagName("input")[0];
        if (this.oldNode && this.oldNode === cNode)
            return;
        else {
            cNode.addEventListener('change', listener, false);
            this.oldNode = node;
        }
    },

    initDragDrop: function () {
        var filesUpload = $id("image-upload"),
            dropArea = $id("img-drop-panel"),
            fileText = $id("image-upload-text"),
            self = this;

        var droppedFiles = function (files) {
            if (typeof files !== undefined) {
                for (var i = 0, l = files.length; i < l; i++) {
                    self.uploadImage(files[i]);
                }
            }
        };
        filesUpload.addEventListener("change", function () {
            self.uploadImage(this.files[0]);
            fileText.value = this.files[0].name;
            this.value = "";
        }, false);

        fileText.addEventListener("input", function (event) {
            if (this.value.indexOf("http") >= 0) {

                if (this.value.lastIndexOf(".png") >= 0) {
                    var imgURL = this.value.substring(0, this.value.lastIndexOf(".png") + 4);
                } else if (this.value.lastIndexOf(".jpg") >= 0) {
                    var imgURL = this.value.substring(0, this.value.lastIndexOf(".jpg") + 4);
                } else {
                    event.preventDefault();
                    event.stopPropagation();
                    return;
                }
                self.uploadImage(imgURL);
            } else {
                event.preventDefault();
                event.stopPropagation();
            }
        }, false);

        dropArea.addEventListener("dragleave", function (event) {
            if (event.target === dropArea)
                removeClass(this, "hover");
            console.log("dragleave");
            event.preventDefault();
            event.stopPropagation();
        }, false);

        dropArea.addEventListener("dragenter", function (event) {
            addClass(this, "hover");
            console.log("dragenter");
            event.preventDefault();
            event.stopPropagation();
        }, false);

        dropArea.addEventListener("dragover", function (event) {
            event.preventDefault();
            event.stopPropagation();
        }, false);

        dropArea.addEventListener("drop", function (event) {
            droppedFiles(event.dataTransfer.files);
            removeClass(this, "hover");
            event.preventDefault();
            event.stopPropagation();
        }, false);
    },

    uploadImage: function (file) {
        var success = function (resp) {
            var imgURL = new XMLSerializer().serializeToString(resp);
            $id('upload-image-preview').innerHTML = imgURL;
            imgURL = imgURL.substring(imgURL.indexOf('src="') + 5, imgURL.indexOf('"/>'));
            $id('image-upload-label').value = imgURL;
            $id("image-upload-text").value = imgURL.substring(imgURL.lastIndexOf('/') + 1);
        };

        var failure = function () {

        };

        if (typeof(file) === "string") {
            ajax.post({
                url: "ProcessServlet",
                param: {action: "imgURLUpload", imgURL: file},
                success: success,
                failure: failure
            });
        } else {
            ajax.post({
                url: "ProcessServlet",
                file: file,
                success: success,
                failure: failure
            });
        }
    }

};

